<template>
  <div>
    <el-card>
      <input type="text" v-model="newPerson" />
      <button @click="addPerson1(newPerson)">添加</button>
      <ul>
        <li v-for="p in person" :key="p.id">
          姓名：{{ p.personName }} 年龄：{{ p.age }}
          <button @click="deletePerson(p.id)">删除</button>
        </li>
      </ul>
      <span> 员工年龄总和：{{ getAllPersonAge }} </span>

    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
export default {
  data(){
    return{
      newPerson:''
    }
  },
  // methods:{
  //   addPerson() {
  //     if (this.newPerson == "") {
  //       alert("请输入姓名");
  //       return;
  //     }
  //     this.$store.dispatch("addPerson", this.newPerson);
  //     this.newPerson = ""
  //   },
  //
  //   deletePerson(id) {
  //     this.$store.commit("deletePerson", id);
  //     }
  // }
  computed: {
    ...mapState(["person"]),
    ...mapGetters(["getAllPersonAge"]),
  },
  methods: {
    ...mapActions({
      addPerson1: "addPerson",   //第一个为本地方法名，第二个参数为actions中的方法名
    }),
    ...mapMutations(["deletePerson"]),//当本地和index.js中的方法名一致时，可以简化成数组写法
  }
}
</script>

<style lang="scss" scoped>
</style>
